
<template>
  <div class="qingbook-merchant">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="container header-content">
        <div class="logo">
          <span class="logo-text">青书 qingbook</span>
        </div>
        <div class="nav-links">
          <el-link href="#" class="nav-link">招商资讯</el-link>
          <el-link href="#" class="nav-link">热门活动</el-link>
          <el-link href="#" class="nav-link">开店引导</el-link>
          <el-link href="#" class="nav-link">经营课程</el-link>
          <el-link href="#" class="nav-link">规则公告</el-link>
        </div>
        <div class="login-btn">
          <el-button type="text" class="login-text">已有账号？登录</el-button>
        </div>
      </div>
    </el-header>

    <!-- 主内容区 -->
    <el-main class="main-content">
      <!-- 平台优势展示 -->
      <section class="platform-advantages">
        <div class="container advantage-content">
          <h2 class="advantage-title">入驻青书，开启生意新可能</h2>
          <div class="advantage-cards">
            <el-card class="advantage-card">
              <div class="card-icon">
                <el-icon><user /></el-icon>
              </div>
              <h3 class="card-title">3亿月活跃用户</h3>
              <p class="card-desc">庞大用户基数，精准触达潜在客群</p>
            </el-card>
            <el-card class="advantage-card">
              <div class="card-icon">
                <el-icon><shopping-cart /></el-icon>
              </div>
              <h3 class="card-title">品销双赢</h3>
              <p class="card-desc">买手直播引流，高效转化促增长</p>
            </el-card>
            <el-card class="advantage-card">
              <div class="card-icon">
                <el-icon><document /></el-icon>
              </div>
              <h3 class="card-title">百亿日曝光</h3>
              <p class="card-desc">笔记种草到下单，一站式交易闭环</p>
            </el-card>
            <el-card class="advantage-card">
              <div class="card-icon">
                <el-icon><video-play /></el-icon>
              </div>
              <h3 class="card-title">商家自播</h3>
              <p class="card-desc">私域粉丝积累，长效持久变现</p>
            </el-card>
          </div>
        </div>
      </section>

      <!-- 开店流程与类型选择 -->
      <section class="shop-process">
        <div class="container process-content">
          <h2 class="process-title">选择店铺类型，快速入驻</h2>
          <div class="shop-type-tabs">
            <el-radio-group v-model="activeShopType" class="type-radio-group">
              <el-radio label="personal" class="type-radio">个人身份</el-radio>
              <el-radio label="individual" class="type-radio">个体工商户</el-radio>
              <el-radio label="enterprise" class="type-radio">企业/公司</el-radio>
            </el-radio-group>
          </div>

          <!-- 个人店流程 -->
          <el-card v-if="activeShopType === 'personal'" class="process-card">
            <div class="shop-type-desc">
              <p>适合无营业执照，以个人身份证件开店</p>
              <el-link href="#" class="desc-link">查看可售类目</el-link>
            </div>
            <div class="process-steps">
              <div class="step-item">
                <div class="step-number">1</div>
                <div class="step-content">
                  <h3 class="step-title">提交材料 <span class="step-time">约2分钟</span></h3>
                  <p class="step-desc">上传身份证并完成人脸验证</p>
                </div>
              </div>
              <div class="step-divider">
                <el-icon class="divider-icon"><arrow-right /></el-icon>
              </div>
              <div class="step-item">
                <div class="step-number">2</div>
                <div class="step-content">
                  <h3 class="step-title">平台审核 <span class="step-time">秒级审核</span></h3>
                  <p class="step-desc">平台进行资质审核，审核通过即开店成功</p>
                </div>
              </div>
            </div>
            <div class="process-note">
              <el-icon class="note-icon"><info /></el-icon>
              <p>注：0元入驻，支持先发品，后缴纳保证金。</p>
            </div>
            <div class="process-actions">
              <el-button type="primary" class="start-btn">立即入驻</el-button>
              <el-link href="#" class="guide-link">开店指南</el-link>
              <el-link href="#" class="guide-link">常见问题 ></el-link>
            </div>
          </el-card>

          <!-- 个体工商户流程 -->
          <el-card v-if="activeShopType === 'individual'" class="process-card">
            <div class="shop-type-desc">
              <p>适合营业执照类型为“个体工商户”</p>
              <el-link href="#" class="desc-link">查看可售类目</el-link>
            </div>
            <div class="process-steps">
              <div class="step-item">
                <div class="step-number">1</div>
                <div class="step-content">
                  <h3 class="step-title">提交资料 <span class="step-time">约15分钟</span></h3>
                  <p class="step-desc">上传个体户营业执照、经营者身份证件等相关材料，填写店铺基本信息，并完成账号验证</p>
                </div>
              </div>
              <div class="step-divider">
                <el-icon class="divider-icon"><arrow-right /></el-icon>
              </div>
              <div class="step-item">
                <div class="step-number">2</div>
                <div class="step-content">
                  <h3 class="step-title">平台审核 <span class="step-time">约1~3个工作日</span></h3>
                  <p class="step-desc">平台进行资质审核，审核通过即开店成功</p>
                </div>
              </div>
            </div>
            <div class="process-note">
              <el-icon class="note-icon"><info /></el-icon>
              <p>注：0元入驻，支持先发品，后缴纳保证金。</p>
            </div>
            <div class="process-actions">
              <el-button type="primary" class="start-btn">立即入驻</el-button>
              <el-link href="#" class="guide-link">开店指南</el-link>
              <el-link href="#" class="guide-link">常见问题 ></el-link>
            </div>
          </el-card>

          <!-- 企业店流程 -->
          <el-card v-if="activeShopType === 'enterprise'" class="process-card">
            <div class="shop-type-desc">
              <p>适合营业执照类型为“个体工商户”或“***公司/企业/个人独资企业”等</p>
            </div>
            <div class="process-steps">
              <div class="step-item">
                <div class="step-number">1</div>
                <div class="step-content">
                  <h3 class="step-title">提交材料 <span class="step-time">约2分钟</span></h3>
                  <p class="step-desc">上传公司营业执照、法人身份证件等相关材料，并完成账号验证</p>
                </div>
              </div>
              <div class="step-divider">
                <el-icon class="divider-icon"><arrow-right /></el-icon>
              </div>
              <div class="step-item">
                <div class="step-number">2</div>
                <div class="step-content">
                  <h3 class="step-title">平台审核 <span class="step-time">约1~3个工作日</span></h3>
                  <p class="step-desc">平台进行资质审核，审核通过即开店成功</p>
                </div>
              </div>
            </div>
            <div class="process-note">
              <el-icon class="note-icon"><info /></el-icon>
              <p>注：发品前需完成保证金缴纳，<el-link href="#" class="note-link">查看保证金规则</el-link></p>
            </div>
            <div class="process-actions">
              <el-button type="primary" class="start-btn">立即入驻</el-button>
              <el-link href="#" class="guide-link">开店指南</el-link>
              <el-link href="#" class="guide-link">常见问题 ></el-link>
            </div>
          </el-card>
        </div>
      </section>

      <!-- 优秀案例展示 -->
      <section class="excellent-cases">
        <div class="container cases-content">
          <h2 class="cases-title">优秀商家案例</h2>
          <div class="cases-tabs">
            <el-tabs v-model="activeCaseTab" class="case-tabs">
              <el-tab-pane label="时尚潮流" name="fashion"></el-tab-pane>
              <el-tab-pane label="美妆护肤" name="beauty"></el-tab-pane>
              <el-tab-pane label="美食健康" name="food"></el-tab-pane>
              <el-tab-pane label="家居家具" name="home"></el-tab-pane>
              <el-tab-pane label="母婴文教" name="maternal"></el-tab-pane>
              <el-tab-pane label="文玩手工艺" name="handicraft"></el-tab-pane>
            </el-tabs>
          </div>

          <div class="cases-list">
            <!-- 案例1：时尚潮流 -->
            <el-card v-if="activeCaseTab === 'fashion'" class="case-card">
              <div class="case-header">
                <h3 class="case-name">blacknini尹华夫</h3>
                <p class="case-tag">博主店 · 时尚潮流</p>
              </div>
              <div class="case-desc">
                <p>小红书原生博主，崇尚自由率性、舒适的穿搭方式，拒绝用滤镜遮盖真实的自己。通过粗花呢等多层次纱线交织的材质，展现穿着者的人生层次和生命浓度，偏爱采用原生态的手工缝制。</p>
              </div>
              <div class="case-data">
                <div class="data-item">
                  <p class="data-value">1000w+</p>
                  <p class="data-name">月销售额</p>
                </div>
                <div class="data-item">
                  <p class="data-value">30w+</p>
                  <p class="data-name">粉丝量</p>
                </div>
              </div>
              <div class="case-achieve">
                <p>2021年首次开播，当月破百万，2022年年中首次突破千万月销。</p>
              </div>
            </el-card>

            <!-- 案例2：美妆护肤 -->
            <el-card v-if="activeCaseTab === 'beauty'" class="case-card">
              <div class="case-header">
                <h3 class="case-name">RED CHAMBER</h3>
                <p class="case-tag">新锐彩妆品牌 · 美妆护肤</p>
              </div>
              <div class="case-desc">
                <p>可持续美妆国货品牌，视产品如同探索一块未经雕琢的玉，追求内在的流动与多元，开发更多可能性。</p>
              </div>
              <div class="case-data">
                <div class="data-item">
                  <p class="data-value">10000+</p>
                  <p class="data-name">单品月销售量</p>
                </div>
                <div class="data-item">
                  <p class="data-value">700%+</p>
                  <p class="data-name">销售额增长</p>
                </div>
              </div>
              <div class="case-achieve">
                <p>通过爆品多用膏渗透通勤场景人群，带动品牌站内销量爆发，23年上半年店铺GMV增长70+倍。</p>
              </div>
            </el-card>

            <!-- 案例3：美食健康 -->
            <el-card v-if="activeCaseTab === 'food'" class="case-card">
              <div class="case-header">
                <h3 class="case-name">头厨</h3>
                <p class="case-tag">地域美食好店 · 美食健康</p>
              </div>
              <div class="case-desc">
                <p>一顿特色早餐，尽享地域美味。头厨定向国人地域饮食文化持续推出多款地域性特色早餐。</p>
              </div>
              <div class="case-data">
                <div class="data-item">
                  <p class="data-value">20w+</p>
                  <p class="data-name">K播单月销售额</p>
                </div>
                <div class="data-item">
                  <p class="data-value">38w+</p>
                  <p class="data-name">单篇商品笔记销售额</p>
                </div>
              </div>
              <div class="case-achieve">
                <p>22年正式入驻小红书后通过多条通路塑造品牌势能，品牌全渠道GMV从22年100W+增长至23年上半年的3000W+。</p>
              </div>
            </el-card>

            <!-- 案例4：家居家具 -->
            <el-card v-if="activeCaseTab === 'home'" class="case-card">
              <div class="case-header">
                <h3 class="case-name">宜氧</h3>
                <p class="case-tag">原创设计品牌 · 家居家具</p>
              </div>
              <div class="case-desc">
                <p>成立了18年的设计师原创品牌家具，整体在22年全网成交超2亿，拥有自己的家具制造工厂和专业设计团队。</p>
              </div>
              <div class="case-data">
                <div class="data-item">
                  <p class="data-value">500w+</p>
                  <p class="data-name">单月销售额</p>
                </div>
                <div class="data-item">
                  <p class="data-value">1000w+</p>
                  <p class="data-name">大促销售额</p>
                </div>
              </div>
              <div class="case-achieve">
                <p>年初入驻小红书电商，次月成交即破百万，618大促期间借助家具设计师垂k重点发力品牌整体成交破千万。</p>
              </div>
            </el-card>
          </div>
        </div>
      </section>

      <!-- 规则公告区 -->
      <section class="rules-notice">
        <div class="container notice-content">
          <h2 class="notice-title">规则公告</h2>
          <el-table :data="noticeTableData" border class="notice-table">
            <el-table-column prop="title" label="公告标题" width="600"></el-table-column>
            <el-table-column prop="date" label="发布时间"></el-table-column>
            <el-table-column label="操作">
              <template #default>
                <el-link type="primary">查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
    </el-main>

    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="container footer-content">
        <div class="footer-logo">
          <span class="logo-text">青书 qingbook</span>
          <p class="footer-slogan">让生意更简单，让创作更有价值</p>
        </div>
        <div class="footer-links">
          <div class="link-group">
            <h4 class="link-title">商家服务</h4>
            <ul class="link-list">
              <li><a href="#">入驻指南</a></li>
              <li><a href="#">经营规则</a></li>
              <li><a href="#">商家学院</a></li>
              <li><a href="#">客服中心</a></li>
            </ul>
          </div>
          <div class="link-group">
            <h4 class="link-title">平台资源</h4>
            <ul class="link-list">
              <li><a href="#">营销工具</a></li>
              <li><a href="#">数据中心</a></li>
              <li><a href="#">流量扶持</a></li>
              <li><a href="#">案例库</a></li>
            </ul>
          </div>
          <div class="link-group">
            <h4 class="link-title">关于我们</h4>
            <ul class="link-list">
              <li><a href="#">公司简介</a></li>
              <li><a href="#">招贤纳士</a></li>
              <li><a href="#">联系我们</a></li>
              <li><a href="#">法律声明</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="copyright">
        <p>© 2024 青书 qingbook 版权所有</p>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { 
  User, 
  ShoppingCart, 
  Document, 
  VideoPlay, 
  InfoFilled, 
  ArrowRight 
} from '@element-plus/icons-vue';
// 店铺类型切换
const activeShopType = ref('personal');

// 案例标签切换
const activeCaseTab = ref('fashion');

// 公告表格数据
const noticeTableData = [
  {
    title: '青书技术服务费规则',
    date: '2023-08-18'
  },
  {
    title: '青书经营类目一览表',
    date: '2023-08-18'
  },
  {
    title: '开店店铺类型怎么选',
    date: '2023-08-18'
  },
  {
    title: '青书店铺命名规则',
    date: '2023-08-18'
  }
];
</script>

<style scoped>
/* 全局样式 */
:root {
  --primary-color: #00B4AC;
  --primary-light: #E8F8F7;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-color: #EEEEEE;
  --white: #FFFFFF;
}

.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 顶部导航 */
.header {
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  padding: 0;
  height: 80px;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-link {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
}

.nav-link:hover {
  color: var(--primary-color);
}

.login-btn {
  display: flex;
  align-items: center;
}

.login-text {
  color: var(--primary-color);
  font-size: 16px;
}

/* 主内容区 */
.main-content {
  background-color: #FAFAFA;
  padding: 40px 0;
}

/* 平台优势 */
.platform-advantages {
  padding: 40px 0;
}

.advantage-title {
  text-align: center;
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 40px;
  font-weight: 700;
}

.advantage-cards {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.advantage-card {
  width: 250px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background-color: var(--white);
}

.card-icon {
  font-size: 36px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.card-title {
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 600;
}

.card-desc {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 开店流程 */
.shop-process {
  padding: 40px 0;
  background-color: var(--white);
  margin: 20px 0;
  border-radius: 12px;
}

.process-title {
  text-align: center;
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 30px;
  font-weight: 700;
}

.type-radio-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.type-radio {
  font-size: 18px;
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.el-radio__input.is-checked + .el-radio__label {
  color: var(--primary-color);
  font-weight: 600;
}

.process-card {
  width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.shop-type-desc {
  padding: 20px 30px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-type-desc p {
  font-size: 16px;
  color: var(--text-primary);
}

.desc-link {
  color: var(--primary-color);
  font-size: 14px;
}

.process-steps {
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

.step-title {
  font-size: 18px;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 5px;
}

.step-time {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: normal;
  margin-left: 10px;
}

.step-desc {
  font-size: 14px;
  color: var(--text-secondary);
}

.step-divider {
  color: var(--border-color);
  font-size: 24px;
}

.process-note {
  padding: 0 30px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
}

.note-icon {
  color: var(--primary-color);
}

.note-link {
  color: var(--primary-color);
  padding: 0 5px;
}

.process-actions {
  padding: 20px 30px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 20px;
}

.start-btn {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  padding: 10px 24px;
  font-size: 16px;
  border-radius: 8px;
}

.start-btn:hover {
  background-color: #009E96;
  border-color: #009E96;
}

.guide-link {
  color: var(--text-secondary);
  font-size: 14px;
}

.guide-link:hover {
  color: var(--primary-color);
}

/* 优秀案例 */
.excellent-cases {
  padding: 40px 0;
}

.cases-title {
  text-align: center;
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 30px;
  font-weight: 700;
}

.case-tabs {
  width: 80%;
  margin: 0 auto 30px;
}

.el-tabs__nav {
  justify-content: center;
}

.el-tabs__item {
  font-size: 16px;
  color: var(--text-secondary);
  padding: 0 20px;
}

.el-tabs__item.is-active {
  color: var(--primary-color);
  font-weight: 600;
}

.el-tabs__active-bar {
  background-color: var(--primary-color);
}

.cases-list {
  display: flex;
  justify-content: center;
}

.case-card {
  width: 800px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.case-header {
  padding: 20px 30px;
  border-bottom: 1px solid var(--border-color);
}

.case-name {
  font-size: 20px;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 5px;
}

.case-tag {
  font-size: 14px;
  color: var(--text-secondary);
}

.case-desc {
  padding: 20px 30px;
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.6;
}

.case-data {
  padding: 0 30px 20px;
  display: flex;
  gap: 40px;
  border-bottom: 1px solid var(--border-color);
}

.data-item {
  display: flex;
  flex-direction: column;
}

.data-value {
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 5px;
}

.data-name {
  font-size: 14px;
  color: var(--text-secondary);
}

.case-achieve {
  padding: 20px 30px;
  font-size: 14px;
  color: var(--text-secondary);
  background-color: var(--primary-light);
}

/* 规则公告 */
.rules-notice {
  padding: 40px 0;
  background-color: var(--white);
  margin: 20px 0;
  border-radius: 12px;
}

.notice-title {
  text-align: center;
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 30px;
  font-weight: 700;
}

.notice-table {
  width: 800px;
  margin: 0 auto;
  border-radius: 8px;
}

.el-table th {
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: 600;
}

.el-table td {
  color: var(--text-primary);
}

/* 页脚 */
.footer {
  background-color: var(--text-primary);
  color: var(--white);
  padding: 40px 0 20px;
  margin-top: 40px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.footer-logo .logo-text {
  color: var(--white);
  margin-bottom: 10px;
  display: block;
}

.footer-slogan {
  color: #AAAAAA;
  font-size: 14px;
}

.footer-links {
  display: flex;
  gap: 80px;
}

.link-title {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.link-list {
  list-style: none;
  padding: 0;
}

.link-list li {
  margin-bottom: 10px;
}

.link-list a {
  color: #AAAAAA;
  font-size: 14px;
  text-decoration: none;
}

.link-list a:hover {
  color: var(--primary-color);
}

.copyright {
  text-align: center;
  color: #AAAAAA;
  font-size: 14px;
  padding-top: 20px;
  border-top: 1px solid #444444;
}
</style>